<template>
  <div class="gl_contentBox gl_heightFull">
    <!-- query -->
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :span="6" :lg="4">
          <p>{{ $t('activities.type') }}</p>
          <el-select v-model="qo.type" :placeholder="$t('search.whole')" size="mini" filterable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
        <el-col :span="6" :lg="4" class="search_btn">
          <el-button type="primary" size="mini">{{ $t('button.query') }}</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- table -->
    <div class="gl_mb_15">
      <el-table :data="tableData" stripe border size="mini" style="width: 100%">
        <el-table-column prop="date" label="培训名称" width="180" />
        <el-table-column prop="name" label="开始日期" width="180" />
        <el-table-column prop="name" label="结束日期" width="180" />
        <el-table-column prop="name" label="联系人" width="180" />
        <el-table-column prop="name" label="联系方式" width="180" />
        <el-table-column prop="address" label="地点" />
        <el-table-column fixed="right" :label="$t('table.actions')" align="center" :width="140">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="clickEdit(scope.row)"> {{ $t('table.edit') }} </el-button>
            <el-button size="mini" type="text" @click="clickDelete(scope.row)"> {{ $t('table.delete') }} </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- page -->
    <div class="gl_paginationBox">
      <el-pagination
        :current-page="qo.page"
        :page-size="qo.page_size"
        :total="400"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      qo: {},
      options: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    };
  },
  methods: {
    clickEdit(row) {
      console.log('clickEdit -> row', row);
    },
    clickDelete(row) {
      console.log('clickDelete -> row', row);
    },
    // 分页操作
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.page_size = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
